<template>
  <div>
    <GiTable
      row-key="userId"
      id="InviteTable"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
      @sorter-change="onSorterChange"
    >
      <template #custom-extra>
        <a-form :model="listParams" size="small" layout="inline">
          <a-form-item label="关键字检索：">
            <a-input
              v-model="listParams.keyword"
              placeholder="输入邀请码/手机号检索"
              @press-enter="changeCurrent(1)"
            ></a-input>
          </a-form-item>
          <a-form-item label="用户类型：">
            <a-select v-model="listParams.type" placeholder="请选择" @change="changeCurrent(1)">
              <a-option value="" label="全部"></a-option>
              <a-option :value="2" label="已下单"></a-option>
              <a-option :value="3" label="未下单"></a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="注册时间：">
            <ms-date2
              v-model:start="listParams.registerAt.beginAt"
              v-model:end="listParams.registerAt.endAt"
              @dateChange="changeCurrent(1)"
            ></ms-date2>
          </a-form-item>
          <a-form-item label="下单时间：">
            <ms-date2
              v-model:start="listParams.orderAt.beginAt"
              v-model:end="listParams.orderAt.endAt"
              @dateChange="changeCurrent(1)"
            ></ms-date2>
          </a-form-item>
          <a-form-item hide-label>
            <a-space>
              <a-button type="primary" size="small" @click="changeCurrent(1)">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button size="small" @click="onResetSearch">
                <template #icon>
                  <icon-sync />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </template>
    </GiTable>
  </div>
</template>
<script setup>
import { userInviteList } from '@/apis'
import { usePagination } from '@/hooks'
const route = useRoute()

const props = defineProps(['userId'])
const loading = ref(false)
const tableData = ref([])
const columns = ref([
  {
    title: '用户',
    dataIndex: 'nickname',
    width: 150
  },
  {
    title: '级别',
    dataIndex: 'level',
    width: 100,
    render: ({ record }) => {
      return record.level || '用户'
    }
  },
  {
    title: '邀请码',
    dataIndex: 'inviteCode',
    width: 120
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    width: 120
  },
  {
    title: '是否下单',
    dataIndex: 'relegationType',
    width: 120,
    render: ({ record }) => {
      return record.isOrder == 1 ? '是' : '否'
    }
  },
  {
    title: '下单时间',
    dataIndex: 'orderAt',
    width: 180,
    sortable: {
      sorter: true,
      sortDirections: ['descend', 'ascend']
    }
  },
  {
    title: '注册时间',
    dataIndex: 'registerAt',
    width: 180,
    sortable: {
      sorter: true,
      sortDirections: ['descend', 'ascend']
    }
  }
  // {
  //   title: '提醒下单次数',
  //   dataIndex: 'orderRemindPushNum',
  //   width: 160
  // }
])
const listParams = reactive({
  page: 1,
  pageSize: 10,
  keyword: undefined,
  registerAt: {
    beginAt: undefined,
    endAt: undefined
  },
  orderAt: {
    beginAt: undefined,
    endAt: undefined
  },
  sort: undefined,
  sortType: undefined,
  type: undefined
})

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await userInviteList({
      ...listParams,
      id: route.query.id || props.userId,
      type: listParams.type ? listParams.type : undefined,
      registerAt: JSON.stringify(listParams.registerAt) == '{}' ? undefined : listParams.registerAt,
      orderAt: JSON.stringify(listParams.orderAt) == '{}' ? undefined : listParams.orderAt
    })
    tableData.value = res.data.list
    setTotal(res?.data?.pagination.total || 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

//升降序发生改变
const onSorterChange = (dataIndex, direction) => {
  listParams.sort = direction ? (direction === 'ascend' ? 'asc' : 'desc') : undefined
  listParams.sortType = listParams.sort ? dataIndex : undefined
  changeCurrent(1)
}

onMounted(() => {
  changeCurrent(1)
})

// 搜索重置
const onResetSearch = () => {
  listParams.keyword = listParams.type = undefined
  listParams.registerAt = {}
  listParams.orderAt = {}
  changeCurrent(1)
}
</script>
